<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/8/30
  Time: 14:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员的登录页面</title>
    <%--css样式文件--%>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
    <%--核心bootstrap的js文件--%>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <style>
       /* #divTip{
            margin: auto;
        }*/
        #tip{
            color: red;
            font-size: 15px;
            text-align: center;
            margin-left: 200px;
        }
    </style>
</head>
<body>

<div class="container-fluid" style="border: 1px solid #000; width: 500px;height:auto;margin-top: 150px">

   <div>
       <p style="text-align: center;color: #3c763d">后台管理系统</p>
   </div>
    <%--提交后台地址--%>
    <form class="form-horizontal" action="${pageContext.request.contextPath}/admin_login" method="post">
        <div class="form-group" >
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="username" name="adminname" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="password" name="adminpassword" placeholder="请输入密码">
            </div>
        </div>
        <%--验证码--%>
        <div class="form-group">
            <label for="code" class="col-sm-2 control-label">验证码</label>

            <div class="col-sm-10">
                <input type="text" name="code"  id="code">

                <%--原生js方式获取img标签对象--%>
               <%--<img id="img1" onclick="btn_img()"  src="${pageContext.request.contextPath}/checkCodeServlet" style="margin-top: 5px" />--%>
               <img id="img1"   src="${pageContext.request.contextPath}/checkCodeServlet"  />
            </div>
            <div id="divTip">
                <font id="tip">${msg}</font>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Sign in</button>
            </div>
    </div>

    </form>
</div>
</body>
<script>
        //触发点击事件 :Jquery
        //$(function()){}------>替代了$(document).ready(function(){}
        $(function () { // Jquery页面载入事件(将body中的内容加载完毕)    ----原生js: onload事件
            //  alert("页面载入事件触发了...");

            //Jquery的选择器
            //id选择器/ class选择器 /element(标签选择器)
            //获取id="img1"的这个标签对象(Jq对象)
            $("#img1").click(function () { //并且添加点击事件
                   // alert("点击图片图片触发单击点击事件")
                 //new Date().getTime()获取当前系统时间毫秒值
                   this.src= "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime() ;

            }) ;
    }) ;

 /* //原生Js的写法
  function btn_img() {

      var img = document.getElementById("img1");
      //图片缓冲:内存中:需要让地址每次从内存获取图片本身数据,不是之前的数据
      //Date():Js日期对象: 当前系统时间
      img.src="${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime() ;
  }*/

</script>
</html>
